<template>

	<view class="flowLaunch-v">
		<u-toast ref="uToast"></u-toast><!-- 弹窗 -->
		<u-image width="70%" :src="url" mode="widthFix" class="image-class"></u-image>

		<view class="block-class">

			<u-input v-model="barcode" :type="type" :border="border" class="input-class" placeholder="请扫描做番号"
				:focus="focused" @focus="onFocus" @input="scanbarcode" />

		</view>

		<view style="display: flex;">

			<view class="left-block-class">

				<text class="num-class"> {{textcontent}}</text>
				<view class="bottom-class">
					<u-icon name="scan" color="#2979ff" size="50"></u-icon>
					<text class="text-class">已扫描</text>

				</view>
			</view>
			<view class="right-block-class">

				<text class="num-class">{{textcontent2}}</text>
				<view class="bottom-class">
					<u-icon name="scan" color="#2979ff" size="50"></u-icon>
					<text class="text-class">未扫描</text>
				</view>
			</view>
		</view>

		<view class="buttom-actions">

			<u-button class="buttom-btn" @click="cancel" type="info">重新扫描</u-button>
			<u-button class="buttom-btn" type="primary" @click="scan">
				确认
			</u-button>
		</view>

	</view>


</template>

<script>
	import {
		getScanCount
	} from '@/api/q1/business/scan/scan.js'


	export default {
		data() {
			return {
				main: null,
				receiver: null,
				intentFilter: null,
				url: '/static/scan.gif',
				barcode: '',
				type: 'text',
				border: true,
				disabled: true,
				focused: true,
				textcontent: 0,
				textcontent2: 0
			}
		},
		watch: {

		},
		onReady() {

		},
		onShow() {
			this.getCount()
		},
		
		
	

		mounted() {
		
		},
		methods: {

			
			getCount() {

				getScanCount().then(res => {
					this.textcontent = res.data.ScannedCount;
					this.textcontent2 = res.data.NotScannedCount;
				})
			},

			scan() {

				if (this.barcode.length > 0) {
					uni.navigateTo({
						url: '/pages/q1/business/scan/designation?id=' + this.barcode
					})
				} else {
					this.$refs.uToast.show({
						title: "请扫描做番号!",
						type: 'error',
						duration: 1000,
					});
				}
			},
			cancel() {
				this.barcode = "";
				this.focused = false;
				this.$nextTick(() => {
					this.focused = true;
				});
			},
			onFocus() {

				// #ifdef APP-PLUS

				uni.hideKeyboard();

				// #endif
			},

			//扫描条码
			scanbarcode(event) {

				// var value = event;
				// let newStr = value.replace(/-/g, "");
				// //if (value.length - newStr.length === 1) {
				// 	if(value.length > 0 ){
				// 	this.$nextTick(() => {
				// 		uni.navigateTo({
				// 			url: '/pages/q1/business/scan/designation?id=' + this.barcode
				// 		})
				// 	});
				// } else {
				// 	this.focused = false;
				// 	//扫描失败
				// 	this.$nextTick(() => {
				// 		this.barcode = '';
				// 		this.focused = true;
				// 	});
				// }

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}

	.flowLaunch-v {
		width: 100%;

	}

	.input-class {
		margin-left: 10rpx;
		margin-right: 10rpx;
		text-align: center;
		height: 80rpx;
	}

	.image-class {

		margin: auto;
		padding: 40rpx;

	}

	.block-class {

		margin-top: 40rpx;
		margin-left: 80rpx;
		margin-right: 40px;
		box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.2);
		padding: 20rpx;
		border-radius: 8rpx;
	}

	.left-block-class {

		text-align: center;
		margin-top: 40rpx;
		margin-left: 80rpx;
		
		box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.2);
		padding: 10rpx;
		border-radius: 8rpx;
		width: 270rpx;
		height: 160rpx;
	}

	.right-block-class {
		text-align: center;
		margin-top: 40rpx;
		margin-left: 40rpx;
		box-shadow: 0px 0px 5px 0 rgba(0, 0, 0, 0.2);
		padding: 10rpx;
		border-radius: 8rpx;
		width: 270rpx;
		height: 160rpx;

	}

	.num-class {
		font-size: 60rpx;
	}

	.bottom-class {

		display: flex;

		justify-content: center;
	}

	.text-class {
		font-size: 28rpx;
		margin-left: 10rpx;
		line-height: 30px;
		/* 与高度相同 */
	}
</style>